<template>
  <div id="merchantBrandInfo" class="merchantBrandInfo">
    <div class="brand_con">
      <div class="brand_main">
        <div class="brand_form">
          <p class="headTitle">门店信息完善</p>
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            status-icon
            label-width="100px"
            style="margin-right: 14%"
          >
            <!--门店名称-->
            <el-form-item
              :rules="[
                { required: true, message: '请输入门店名', trigger: 'blur' },
              ]"
              class="brand_item"
              label-width="155px"
              prop="name"
              label="名称"
            >
              <el-input v-model="ruleForm.name" :value="ruleForm.name"/>
            </el-form-item>

            <!--简介-->
            <el-form-item
              :rules="[
                { required: true, message: '请输入简介信息', trigger: 'blur' },
              ]"
              class="brand_item"
              label="简介"
              label-width="155px"
              prop="desc"
            >
              <el-input
                v-model="ruleForm.desc"
                :rows="4"
                :value="ruleForm.desc"
                type="textarea"
                resize="none"
                maxlength="250"
                show-word-limit
              />
            </el-form-item>

            <!--门店图片-->
            <el-form-item
              :rules="[
                {
                  required: true,
                  message: '请上传门店图片',
                  trigger: 'change',
                },
              ]"
              class="brand_item"
              label-width="155px"
              prop="picUrl"
              label="门店图片"
            >
              <el-upload
                action=""
                :show-file-list="false"
                :before-upload="
                  (file) => handleBeforeUpload(file, 'brandImg', 800, 506)
                "
                class="avatar-uploader"
                accept=".jpg,.jpeg,.png,.gif"
              >
                <img
                  v-if="ruleForm.picUrl"
                  :src="ruleForm.picUrl"
                  class="avatar"
                  style="width: 100%; margin-bottom: -15px"
                />
                <i v-else class="el-icon-upload avatar-uploader-icon">上传</i>
              </el-upload>
            </el-form-item>

            <!--商品低价-->
            <el-form-item
              :rules="[
                { required: false, message: '请输入商品低价', trigger: 'blur' },
              ]"
              class="brand_item"
              label-width="155px"
              prop="floorPrice"
              label="商品低价"
            >
              <el-input
                v-model="ruleForm.floorPrice"
                :value="ruleForm.floorPrice"
                type="number"
              />
            </el-form-item>

            <!--分享二维码图片-->
            <!--            <el-form-item-->
            <!--              v-if="ruleForm.shareUrl"-->
            <!--              class="brand_item"-->
            <!--              label-width="155px"-->
            <!--              label="分享二维码图片"-->
            <!--            >-->
            <!--              <el-tooltip effect="dark" content="点击预览" placement="right">-->
            <!--                <img-->
            <!--                  v-if="ruleForm.shareUrl"-->
            <!--                  :src="ruleForm.shareUrl"-->
            <!--                  class="avatar hover"-->
            <!--                  style="width: 100px; margin-bottom: -15px"-->
            <!--                  @click="sharePicVisible = true"-->
            <!--                />-->
            <!--              </el-tooltip>-->
            <!--            </el-form-item>-->

            <!--公司名称-->
            <el-form-item
              class="brand_item"
              label-width="155px"
              prop="company"
              label="公司名称"
            >
              <el-input v-model="ruleForm.company" :value="ruleForm.company"/>
            </el-form-item>

            <!--转账信息-->
            <el-form-item
              class="brand_item"
              label-width="155px"
              prop="withdrawAccount"
              label="转账信息"
            >
              <!--信息1-->
              <el-main class="pay_block">
                <label style="color: #517f7f">姓名</label>
                <el-input
                  v-model="ruleForm.withdrawAccount[0].realName"
                  :value="ruleForm.withdrawAccount[0].realName"
                  style="width: 80px"
                />

                <label class="label_item">转账方式</label>
                <el-select
                  v-model="ruleForm.withdrawAccount[0].payType"
                  style="width: 105px"
                  filterable
                  placeholder="转账方式"
                  @change="change()"
                >
                  <el-option
                    v-for="item in payType"
                    :key="item.type"
                    :label="item.name"
                    :value="item.type"
                  />
                </el-select>

                <span v-if="ruleForm.withdrawAccount[0].payType == 2">
                  <label class="label_item">开户行</label>
                  <el-select
                    v-model="ruleForm.withdrawAccount[0].depositBank"
                    style="width: 100px"
                    filterable
                    placeholder="开户行"
                    @change="change()"
                  >
                    <el-option
                      v-for="item in supportBanks"
                      :key="item.bankCode"
                      :label="item.bankName"
                      :value="item.bankCode"
                    />
                  </el-select>
                </span>

                <label
                  v-if="ruleForm.withdrawAccount[0].payType == 1"
                  class="label_item"
                >openId
                  <el-tooltip
                    content="请在小程序端个人中心我的设置处复制openId信息"
                    placement="top"
                  ><i class="el-icon-question tip"/></el-tooltip
                  >
                </label>
                <label v-else class="label_item">账号</label>

                <el-input
                  v-if="ruleForm.withdrawAccount[0].payType == 1"
                  v-model="ruleForm.withdrawAccount[0].account"
                  :value="ruleForm.withdrawAccount[0].account"
                  type="text"
                  style="width: 170px"
                />
                <el-input
                  v-else
                  v-model="ruleForm.withdrawAccount[0].account"
                  :value="ruleForm.withdrawAccount[0].account"
                  type="text"
                  maxlength="19"
                  style="width: 170px"
                />

                <!--                <i class="el-icon-circle-plus pay_plus" @click="addPayItem()" />-->
              </el-main>
              <!--信息2-->
              <!--              <el-main v-if="secondPayShow" class="pay_block">-->
              <!--                <label style="color: #517f7f">姓名</label>-->
              <!--                <el-input-->
              <!--                  v-model="ruleForm.withdrawAccount[1].realName"-->
              <!--                  :value="ruleForm.withdrawAccount[1].realName"-->
              <!--                  style="width: 80px"-->
              <!--                />-->

              <!--                <label class="label_item">转账方式</label>-->
              <!--                <el-select-->
              <!--                  v-model="ruleForm.withdrawAccount[1].payType"-->
              <!--                  style="width: 105px"-->
              <!--                  filterable-->
              <!--                  placeholder="转账方式"-->
              <!--                  @change="change()"-->
              <!--                >-->
              <!--                  <el-option-->
              <!--                    v-for="item in payType"-->
              <!--                    :key="item.type"-->
              <!--                    :label="item.name"-->
              <!--                    :value="item.type"-->
              <!--                  />-->
              <!--                </el-select>-->

              <!--                <span v-if="ruleForm.withdrawAccount[1].payType == 2">-->
              <!--                  <label class="label_item">开户行</label>-->
              <!--                  <el-select-->
              <!--                    v-model="ruleForm.withdrawAccount[1].depositBank"-->
              <!--                    style="width: 100px"-->
              <!--                    filterable-->
              <!--                    placeholder="开户行"-->
              <!--                    @change="change()"-->
              <!--                  >-->
              <!--                    <el-option-->
              <!--                      v-for="item in supportBanks"-->
              <!--                      :key="item.bankCode"-->
              <!--                      :label="item.bankName"-->
              <!--                      :value="item.bankCode"-->
              <!--                    />-->
              <!--                  </el-select>-->
              <!--                </span>-->

              <!--                <label-->
              <!--                  v-if="ruleForm.withdrawAccount[1].payType == 1"-->
              <!--                  class="label_item"-->
              <!--                  >openId<el-tooltip-->
              <!--                    content="请在小程序端个人中心我的设置处复制openId信息"-->
              <!--                    placement="top"-->
              <!--                    ><i class="el-icon-question tip" /></el-tooltip-->
              <!--                ></label>-->
              <!--                <label v-else class="label_item">账号</label>-->

              <!--                <el-input-->
              <!--                  v-if="ruleForm.withdrawAccount[1].payType == 1"-->
              <!--                  v-model="ruleForm.withdrawAccount[1].account"-->
              <!--                  :value="ruleForm.withdrawAccount[1].account"-->
              <!--                  type="text"-->
              <!--                  style="width: 170px"-->
              <!--                />-->
              <!--                <el-input-->
              <!--                  v-else-->
              <!--                  v-model="ruleForm.withdrawAccount[1].account"-->
              <!--                  :value="ruleForm.withdrawAccount[1].account"-->
              <!--                  type="text"-->
              <!--                  maxlength="19"-->
              <!--                  style="width: 170px"-->
              <!--                />-->

              <!--                <i-->
              <!--                  class="el-icon-remove pay_plus"-->
              <!--                  @click="-->
              <!--                    removePayItem(1);-->
              <!--                    secondPayShow = false;-->
              <!--                  "-->
              <!--                />-->
              <!--              </el-main>-->
              <!--信息3-->
              <!--              <el-main v-if="thirdPayShow" class="pay_block">-->
              <!--                <label style="color: #517f7f">姓名</label>-->
              <!--                <el-input-->
              <!--                  v-model="ruleForm.withdrawAccount[2].realName"-->
              <!--                  :value="ruleForm.withdrawAccount[2].realName"-->
              <!--                  style="width: 80px"-->
              <!--                />-->

              <!--                <label class="label_item">转账方式</label>-->
              <!--                <el-select-->
              <!--                  v-model="ruleForm.withdrawAccount[2].payType"-->
              <!--                  style="width: 105px"-->
              <!--                  filterable-->
              <!--                  placeholder="转账方式"-->
              <!--                  @change="change()"-->
              <!--                >-->
              <!--                  <el-option-->
              <!--                    v-for="item in payType"-->
              <!--                    :key="item.type"-->
              <!--                    :label="item.name"-->
              <!--                    :value="item.type"-->
              <!--                  />-->
              <!--                </el-select>-->

              <!--                <span v-if="ruleForm.withdrawAccount[2].payType == 2">-->
              <!--                  <label class="label_item">开户行</label>-->
              <!--                  <el-select-->
              <!--                    v-model="ruleForm.withdrawAccount[2].depositBank"-->
              <!--                    style="width: 100px"-->
              <!--                    filterable-->
              <!--                    placeholder="开户行"-->
              <!--                    @change="change()"-->
              <!--                  >-->
              <!--                    <el-option-->
              <!--                      v-for="item in supportBanks"-->
              <!--                      :key="item.bankCode"-->
              <!--                      :label="item.bankName"-->
              <!--                      :value="item.bankCode"-->
              <!--                    />-->
              <!--                  </el-select>-->
              <!--                </span>-->

              <!--                <label-->
              <!--                  v-if="ruleForm.withdrawAccount[2].payType == 1"-->
              <!--                  class="label_item"-->
              <!--                  >openId<el-tooltip-->
              <!--                    content="请在小程序端个人中心我的设置处复制openId信息"-->
              <!--                    placement="top"-->
              <!--                    ><i class="el-icon-question tip" /></el-tooltip-->
              <!--                ></label>-->
              <!--                <label v-else class="label_item">账号</label>-->

              <!--                <el-input-->
              <!--                  v-if="ruleForm.withdrawAccount[2].payType == 1"-->
              <!--                  v-model="ruleForm.withdrawAccount[2].account"-->
              <!--                  :value="ruleForm.withdrawAccount[2].account"-->
              <!--                  type="text"-->
              <!--                  style="width: 170px"-->
              <!--                />-->
              <!--                <el-input-->
              <!--                  v-else-->
              <!--                  v-model="ruleForm.withdrawAccount[2].account"-->
              <!--                  :value="ruleForm.withdrawAccount[2].account"-->
              <!--                  type="text"-->
              <!--                  maxlength="19"-->
              <!--                  style="width: 170px"-->
              <!--                />-->

              <!--                <i-->
              <!--                  class="el-icon-remove pay_plus"-->
              <!--                  @click="-->
              <!--                    removePayItem(2);-->
              <!--                    thirdPayShow = false;-->
              <!--                  "-->
              <!--                />-->
              <!--              </el-main>-->
            </el-form-item>

            <!--是否自动监控更新商品-->
            <el-form-item
              class="brand_item"
              label-width="155px"
              prop="autoUpdateGood"
              label="是否自动监控更新商品"
            >
              <el-radio-group v-model="ruleForm.autoUpdateGood">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <!--店铺url地址-->
            <!--            <el-form-item-->
            <!--              :rules="[-->
            <!--                {-->
            <!--                  pattern:-->
            <!--                    /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/,-->
            <!--                  message: '请输入正确的url地址',-->
            <!--                  trigger: 'blur',-->
            <!--                },-->
            <!--              ]"-->
            <!--              class="brand_item"-->
            <!--              label-width="155px"-->
            <!--              prop="shopUrl"-->
            <!--              label="店铺url地址"-->
            <!--            >-->
            <!--              <el-input v-model="ruleForm.shopUrl" :value="ruleForm.shopUrl" />-->
            <!--            </el-form-item>-->

            <!--商品类别-->
            <!--            <el-form-item-->
            <!--              class="brand_item"-->
            <!--              label-width="155px"-->
            <!--              prop="defaultCategoryId"-->
            <!--              label="商品类别"-->
            <!--            >-->
            <!--              <el-select-->
            <!--                v-model="ruleForm.defaultCategoryId"-->
            <!--                filterable-->
            <!--                placeholder="请选择"-->
            <!--                @change="change()"-->
            <!--              >-->
            <!--                <el-option-->
            <!--                  v-for="item in merchantMainBusiness"-->
            <!--                  :key="item.id"-->
            <!--                  :label="item.name"-->
            <!--                  :value="item.id"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->

            <!--默认商品页面数-->
            <el-form-item
              class="brand_item"
              label-width="155px"
              prop="defaultPages"
              label="默认商品页面数"
            >
              <el-input
                v-model="ruleForm.defaultPages"
                :value="ruleForm.defaultPages"
                type="number"
              />
            </el-form-item>

            <!--店铺商品溢价-->
            <el-form-item
              class="brand_item"
              label-width="155px"
              prop="addPercent"
              label="店铺商品溢价"
            >
              <el-input
                v-model="ruleForm.addPercent"
                :value="ruleForm.addPercent"
                type="number"
              />
            </el-form-item>

            <!--提货地址-->
            <el-form-item
              :rules="[
                { required: true, message: '请填写提货地址', trigger: 'blur' },
              ]"
              class="brand_item"
              label-width="155px"
              prop="address"
              label="提货地址"
            >
              <el-input v-model="ruleForm.address" :value="ruleForm.address"/>
            </el-form-item>

            <!--经纬度-->
            <el-form :inline="true" :model="ruleForm" status-icon>
              <el-form-item
                label="经纬度"
                label-width="155px"
                class="brand_item"
              >
                <el-input
                  v-model="ruleForm.longitude"
                  type="number"
                  style="width: 120px"
                  placeholder="输入经度值"
                />
              </el-form-item>
              <el-form-item class="brand_item" label="">
                <el-input
                  v-model="ruleForm.latitude"
                  type="number"
                  style="width: 120px"
                  placeholder="输入纬度值"
                />
              </el-form-item>
              <el-form-item class="brand_item">
                <el-button type="primary" @click="goLbs">获取经纬度</el-button>
              </el-form-item>
            </el-form>

            <!--提货时间配置-->
            <el-form-item
              label-width="155px"
              class="brand_item"
              label="提货时间设置"
            >
              <el-tag
                v-for="tag in ruleForm.fetchTimeRules"
                :key="tag"
                closable
                type="primary"
                @close="handleShutdown(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-time-picker
                v-if="newTimeRulesVisible"
                ref="newTimeRulesInput"
                v-model="newTimeRules"
                format="HH:mm"
                value-format="HH:mm"
                class="input-new-time-rules"
                size="small"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              />
              <el-button
                v-else
                class="button-new-time-rules"
                size="small"
                type="primary"
                @click="addTimeRules"
              >+ 增加
              </el-button
              >
            </el-form-item>

            <div style="height: 55px"/>

            <!--按钮-->
            <el-form-item class="subBtn">
              <el-button type="primary" @click="submitForm('ruleForm')"
              >提 交
              </el-button
              >
              <el-button
                v-if="editBrand == 'true'"
                class="reset"
                @click="toPrePage()"
              >取消
              </el-button
              >
              <el-button v-else class="reset" @click="resetForm('ruleForm')"
              >重 置
              </el-button
              >
            </el-form-item>
          </el-form>

          <el-dialog
            :visible.sync="sharePicVisible"
            :before-close="handleClose"
            title="非三证合一营业执照"
            class="licenceBack"
            style="max-height: 800px; overflow: scroll"
          >
            <img :src="ruleForm.shareUrl" style="width: 100%"/>
          </el-dialog>
        </div>
      </div>
    </div>
    <image-cropper
      v-model="showCrop"
      :imgSrc="imgSrc"
      :cropWidth="cropWidth"
      :aspectRatio="aspectRatio"
      :cropHeight="cropHeight"
      @uploadSuccess="uploadSuccess"
    ></image-cropper>
  </div>
</template>

<script>
import { merchantPicUploadPath } from "@/api/business/storage"
import { merchantMainClass } from "@/api/merchantApply.js"
import { merchantBrandInfo, supportBanks, updateMerchantBrandInfo } from "@/api/merchantBrand.js"
import { getEditBrand, removeEditBrand, setBrandIsImproved } from "@/utils/auth"
import ImageCropper from "@/components/ImageCropper"

export default {
  components: { ImageCropper },
  data() {
    const validateWithdrawAccount = (rule, value, callback) => {
      if (
        this.validateAccountEmpty(value[0]) ||
        (this.secondPayShow === true && this.validateAccountEmpty(value[1])) ||
        (this.thirdPayShow === true && this.validateAccountEmpty(value[2]))
      ) {
        callback(new Error("转账信息每项为必填"))
      } else if (
        this.validateAccountNaN(value[0]) ||
        this.validateAccountNaN(value[1]) ||
        this.validateAccountNaN(value[2])
      ) {
        callback(new Error("卡号只能是16-19位的数字"))
      } else if (
        this.validateAccountNe(value[0]) ||
        this.validateAccountNe(value[1]) ||
        this.validateAccountNe(value[2])
      ) {
        callback(new Error("卡号只能是16-19位的数字"))
      } else {
        callback()
      }
    }
    return {
      showCrop: false, // 展示裁切框
      cropWidth: 0, // 裁切框宽带
      cropHeight: 0, // 裁切框高度
      aspectRatio: 1,
      cropId: "",
      imgSrc: "",
      merchantPicUploadPath,
      merchantMainBusiness: undefined,
      // payType: process.env.PAY_TYPE,
      payType: [
        { type: 1, name: "微信" },
        { type: 2, name: "银行卡" },
        { type: 3, name: "线下" }
      ],
      supportBanks: undefined,
      secondPayShow: false,
      thirdPayShow: false,
      sharePicVisible: false,
      fetchTimeRules: [],
      newTimeRulesVisible: false,
      newTimeRules: "",
      editBrand: "",
      ruleForm: {
        name: "",
        desc: "",
        picUrl: "",
        floorPrice: "",
        shareUrl: "",
        company: "",
        autoUpdateGood: "",
        shopUrl: "",
        defaultCategoryId: "",
        defaultPages: "",
        addPercent: "",
        address: "",
        longitude: "",
        latitude: "",
        fetchTimeRules: [],
        withdrawAccount: [
          {
            payType: null,
            realName: "",
            depositBank: "",
            account: ""
          },
          {
            payType: null,
            realName: "",
            depositBank: "",
            account: ""
          },
          {
            payType: null,
            realName: "",
            depositBank: "",
            account: ""
          }
        ]
      },
      rules: {
        withdrawAccount: [
          { validator: validateWithdrawAccount, trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.editBrand = getEditBrand()
    this.getMerchantMainBusiness()
    this.initMerchantInfo()
    this.allSupportBanks()
  },
  mounted() {
    console.log("this.payType", this.payType)
  },
  methods: {
    handleBeforeUpload(file, cropId, cropWidth, cropHeight) {
      this.imgSrc = URL.createObjectURL(file); // 创建图片地址用于显示和裁切
      this.showCrop = true; // 打开裁切对话框
      this.cropWidth = cropWidth;
      this.cropHeight = cropHeight;
      this.aspectRatio = cropWidth / cropHeight;
      this.cropId = cropId; // 标记裁切的是商品图片
      return false; // 不自动上传，由用户手动触发上传
    },
    uploadSuccess(url) {
      if (this.cropId === "brandImg") {
        this.ruleForm.picUrl = url;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateMerchantBrandInfo(this.ruleForm).then((res) => {
            var data = res.data
            if (data.errno === 0) {
              this.$message({
                message: "信息提交成功，跳转首页中",
                type: "success"
              })
              setBrandIsImproved(true)
              removeEditBrand()
              this.$router.push("/dashboard")
            } else {
              this.$message({
                message: data.errmsg,
                type: "error"
              })
            }
          })
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm.picUrl = ""
    },
    change() {
      this.$forceUpdate()
    },
    getMerchantMainBusiness() {
      merchantMainClass().then((res) => {
        this.merchantMainBusiness = res.data.data
      })
    },
    initMerchantInfo() {
      merchantBrandInfo().then((res) => {
        const info = res.data.data
        for (const item in info) {
          this.ruleForm[item] = info[item]
        }
        const withdrawAccount = this.ruleForm["withdrawAccount"]
        if (
          withdrawAccount[1].account !== "" &&
          withdrawAccount[1].account !== null &&
          withdrawAccount[1].account !== undefined
        ) {
          this.secondPayShow = true
        }
        if (
          withdrawAccount[2].account !== "" &&
          withdrawAccount[2].account !== null &&
          withdrawAccount[2].account !== undefined
        ) {
          this.thirdPayShow = true
        }
        if (info.fetchTimeRules === null || info.fetchTimeRules.length === undefined){
          this.fetchTimeRules = []
        }
        this.fetchTimeRules = info.fetchTimeRules
      })
    },

    allSupportBanks() {
      supportBanks().then((res) => {
        this.supportBanks = res.data.data
      })
    },
    removePayItem(index) {
      const data = this.ruleForm.withdrawAccount[index]
      for (const item in data) {
        data[item] = ""
      }
      this.ruleForm.withdrawAccount[index] = data
    },
    addPayItem() {
      if (this.secondPayShow && this.thirdPayShow) {
        this.$message({
          message: "最多只能填写3项哦",
          type: "error"
        })
      } else {
        if (!this.secondPayShow) {
          this.secondPayShow = true
          return
        }
        if (!this.thirdPayShow) {
          this.thirdPayShow = true
          return
        }
      }
    },
    validateAccountEmpty(item) {
      if (item.payType === 2) {
        for (const value in item) {
          if (item[value] === "") {
            return true
          }
        }
      } else if (item.payType === 1) {
        return item.realName === "" || item.account === ""
      } else if (item.payType === 3) {
        return item.realName === ""
      } else {
        return true
      }
      return false
    },
    validateAccountNaN(item) {
      if (item.payType === 2 && item.account !== "" && item.account !== null) {
        return isNaN(item.account)
      }
      return false
    },
    validateAccountNe(item) {
      if (item.payType === 2 && item.account !== "" && item.account !== null) {
        return item.account.length < 16
      }
      return false
    },
    handleClose(done) {
      done()
    },
    handleShutdown(tag) {
      if (!this.fetchTimeRules) {
        return
      }
      this.fetchTimeRules.splice(this.fetchTimeRules.indexOf(tag), 1)
      this.ruleForm.fetchTimeRules = this.fetchTimeRules
    },
    addTimeRules() {
      this.newTimeRulesVisible = true
    },
    goLbs() {
      const iHeight = 900
      const iWidth = 1300
      const href = "https://lbs.qq.com/tool/getpoint/index.html"
      const iTop = (window.screen.height - 30 - iHeight) / 2 // 获得窗口的垂直位置;
      const iLeft = (window.screen.width - 10 - iWidth) / 2 // 获得窗口的水平位置;
      window.open(
        href,
        name,
        "height=" +
        iHeight +
        ",innerHeight=" +
        iHeight +
        ",width=" +
        iWidth +
        ",innerWidth=" +
        iWidth +
        ",top=" +
        iTop +
        ",left=" +
        iLeft +
        ",toolbar=yes,menubar=yes,scrollbars=auto,resizeable=no,location=no,status=no"
      )
    },
    handleInputConfirm() {
      const newTimeRules = this.newTimeRules
      if (newTimeRules && newTimeRules.length > 1) {
        this.fetchTimeRules.push(newTimeRules[0] + " - " + newTimeRules[1])
        this.ruleForm.fetchTimeRules = this.fetchTimeRules
      }
      this.newTimeRulesVisible = false
      this.newTimeRules = ""
    },
    toPrePage() {
      removeEditBrand()
      this.$router.go(-1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.brand_con {
  width: 55%;
  margin: 0% auto 30px;
}

.brand_form {
  width: 95%;
  margin: 0px auto;
}

.brand_main {
  background: rgba(245, 76, 25, 0.2);
  border-radius: 20px;
  max-height: 890px;
  height: 890px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 25px;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.brand_main::-webkit-scrollbar {
  width: 5px !important;
}

.merchantBrandInfo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.brand_con::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.merchantBrandInfo,
.brand_con {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: hidden;
}

.headTitle {
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 30px auto;
  color: #333366;
  font-weight: bold;
  font-size: 18px;
}

.headTitle::after {
  content: ""; // 必须
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 25px;
  right: 0;
  width: 100%;
  height: 3px;
  background-color: #3366cc;
}

.avatar-uploader-icon {
  /*font-size: 20px;*/
  color: #ffffff;
  width: 100px;
  height: 36px;
  line-height: 36px;
  background-color: #3366ff;
  text-align: center;
  border-radius: 5px;
}

.id-info-uploader {
  display: inline-block;
}

.agreementBack::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.agreementBack {
  max-height: 1000px !important;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: hidden;
}

.agreementBack .el-dialog__body {
  max-height: 800px !important;
  overflow-y: scroll;
  -ms-overflow-y: scroll;
}

.agreementBack .el-dialog {
  margin-top: 5vh !important;
}

.licenceBack::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.licenceBack {
  max-height: 1000px !important;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: hidden;
}

.licenceBack .el-dialog__body {
  padding: 0px 0px !important;
}

.licenceBack .el-dialog__header {
  display: none;
}

.licenceBack .el-dialog {
  background-color: rgba(0, 0, 0, 0);
  margin-top: 0vh !important;
  width: 30% !important;
  margin-top: 2vh !important;
}

.brand_form .brand_item {
  margin-bottom: 0px !important;
  margin-top: 18px !important;
}

.merchantBrandInfo {
  background: linear-gradient(
      #2ae0c8,
      #a2e1d4,
      #acf6ef,
      #cbf5fb,
      #bdf3d4,
      #e6e2c3,
      #e3c887,
      #fad8be
  );
  background: -webkit-linear-gradient(
      #2ae0c8,
      #a2e1d4,
      #acf6ef,
      #cbf5fb,
      #bdf3d4,
      #e6e2c3,
      #e3c887,
      #fad8be
  );
  background: -o-linear-gradient(
      #2ae0c8,
      #a2e1d4,
      #acf6ef,
      #cbf5fb,
      #bdf3d4,
      #e6e2c3,
      #e3c887,
      #fad8be
  );
  background: -moz-linear-gradient(
      #2ae0c8,
      #a2e1d4,
      #acf6ef,
      #cbf5fb,
      #bdf3d4,
      #e6e2c3,
      #e3c887,
      #fad8be
  );
}

.subBtn {
  width: 55%;
  position: fixed;
  top: 91.5%;
  left: 22.5%;
  background: linear-gradient(#cc6699, #ccff99, #66cccc, #6699ff);
  height: 49px;
  border-radius: 0 0 20px 20px;
}

.subBtn .el-form-item__content {
  margin-left: 0 !important;
  text-align: center;
  padding-top: 7px;
}

.label_item {
  margin-left: 10px;
  color: #517f7f;
}

.pay_plus {
  font-size: 25px;
  vertical-align: middle;
  color: #4c4aff;
}

.pay_plus:hover {
  cursor: pointer;
  opacity: 0.7;
}

.pay_block {
  padding: 0 !important;
}

.brand_item .pay_block:not(:first-child) {
  margin-top: 5px;
}

.merchantBrandInfo .el-input__suffix {
  display: none;
}

.hover:hover {
  cursor: pointer;
}

.tip {
  cursor: pointer;
  color: #ff9900;
}
</style>
